/** @file Toolbar.qml
@brief The Qt-Complex Standard toolbar

The standard toolbar has three buttons:

# Home (to show anything),
# Map (opens map navigation)
# Info (any kind of information.

The elements can be changed and the button associations too.
The same model should be used to build a dynamic toolbar with variable number of buttons.
The toolbar includes a positon marker (the actually selected button) to the bottom that
scroll horizontally.

@authorname \n
@licenseversion \n
@actualversion - @dateupdate

@licensenote
*/

import QtQuick 1.0
import "Theme.js" as JObj

Item {
    id: toolbar

    focus:true
    width: objLoad.getWidth(); height: objLoad.getHeight();

    function tb_btnKern() { return Math.round(toolbar.width / 3) + objLoad.getFieldSpacing(); }
    function tb_buttonWidth() { return Math.round(toolbar.width / 3) - (objLoad.getFieldSpacing() * 2); }
    function tb_TextOffset() { return Math.round(toolbar.width / 3 * 0.3); }

    signal button1Clicked; signal button2Clicked; signal button3Clicked
    // The background image covers all the toolbar buttons lenght
    BorderImage {
        id: toolbarBackground
        width: objLoad.getWidth(); height: objLoad.getFieldHeight() + objLoad.getFieldSpacing();
        source: JObj.getTbar(objLoad.getTheme());
        border { left: 10; top: 10; right: 10; bottom: 10 }
        clip: true; smooth: true
    }
    // Definition of the position marker object showing the current selected button
    Image {
        id: positionMarker

        source: JObj.getActiveMenuIcon(objLoad.getTheme());
        anchors.top: toolbarBackground.bottom
        state: "btn1"

        states: [
            State { name: "null"
                AnchorChanges { target: positionMarker; anchors.right: toolbarBackground.left } },
            State { name: "btn1"
                AnchorChanges { target: positionMarker; anchors.left: toolbarBackground.left } },
            State { name: "btn2"
                AnchorChanges { target: positionMarker; anchors.horizontalCenter: toolbarBackground.horizontalCenter } },
            State { name: "btn3"
                AnchorChanges { target: positionMarker; anchors.right: toolbarBackground.right } }
        ]
        // All transitions are managed with the same effect so wildcards are used.
        transitions:
            Transition { from:  "*"; to: "*"
                AnchorAnimation { easing.type: Easing.OutQuad; duration: 500; }
            }
    }

    SubLoader {
        id: button1 // Home

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        height: parent.height
        width: toolbar.tb_buttonWidth()
        fontPoints: objLoad.getFontPoints();
        fieldSpacing: objLoad.getFieldSpacing();
        transform: Translate { x: objLoad.getFieldSpacing() }
        obj_string: JObj.tb_home;
        obj_icon: JObj.getTbarHome(objLoad.getTheme());
        onClicked: { toolbar.button1Clicked(); positionMarker.state = "btn1"; }
        focus:true
    }

    SubLoader {
        id: button2

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        height: parent.height
        width: toolbar.tb_buttonWidth()
        transform: Translate { x: toolbar.tb_btnKern() }
        obj_string: JObj.tb_map;
        obj_icon: JObj.getTbarMap(objLoad.getTheme());
        onClicked: { toolbar.button2Clicked();  positionMarker.state = "btn2"; }
        focus:true
    }

    SubLoader {
        id: button3

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        height: parent.height
        width: toolbar.tb_buttonWidth()
        transform: Translate { x: toolbar.tb_btnKern() * 2 }
        obj_string: JObj.tb_info;
        obj_icon: JObj.getTbarInfo(objLoad.getTheme());
        onClicked: { toolbar.button3Clicked();  positionMarker.state = "btn3"; }
        focus:true
    }
}
